<template>
  <div class="car">
    <div v-if="!flag" class="goshop">
                        <img src="https://res.vmallres.com/bporder/rn/20240618/h5//images/convemptyCart.png" alt="">
                        <div>为辛苦的自己去挑选几件商品吧</div>
                        <button class="btngoshop" @click="btngoshop()">去购物</button>
                    </div>`
    <div class="box" v-for="v,k in list" >
      <div class="it">
        <van-checkbox checked-color="rgb(150, 191, 183)" v-model="v.ischeck" @change="checkone(v)"></van-checkbox>
      </div>
      <div class="its">
        <van-swipe-cell>
  <!-- <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    class="goods-card"
    thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
  />
  -->
        <van-card 
          @click-thumb="go(v)"
        class="cardits"
          :price="(v.price/1).toFixed(2)"
          :desc="v.tintro"
          :title="v.tname"
          :thumb="v.fullSrc"
          :num="v.pnum"
>

  <template #tags>
    <van-tag plain type="danger">特价茶叶</van-tag>
    <!-- <van-tag plain type="danger">标签</van-tag> -->
  </template>
  <template #footer class="foot">
    <van-button size="mini" @click="min(v)">-</van-button>
    <input v-model="v.pnum"  @input="tab(v)" class="van-inptext" type="text">
    <van-button size="mini" @click="add(v)">+</van-button>
  </template>
</van-card>
<template #right class="cardright">
    <van-button  square text="删除" type="danger" @click="del(v)"  class="delete-button"  />
  </template>
</van-swipe-cell>
      </div>
    </div>
   
<div style="height: 50px"  v-show="flag"></div>
<van-submit-bar v-show="flag" :price="total*100" button-text="提交订单"  :disabled="disflag" @submit="pay()">
  <van-checkbox checked-color="rgb(150, 191, 183)" v-model="check" @click="checkall()">全选</van-checkbox>
  <van-button  :disabled="disflag"  class="delbtn" @click="delall()">批量删除</van-button>

  <template #tip>
    你的收货地址不支持同城送, <span @click="">修改地址</span>
  </template>
</van-submit-bar>
  </div>
</template>
<script>
import { Toast } from 'vant';
import {payData} from '@/api';
import {get} from '@/utils/local'
import {delCar} from '@/api';
import { carDate } from '@/api';
import {Modify} from '@/api';
import {setState} from '@/api';
export default {
    components: {},
    props: { },
    data() {
        return {
          disflag:false,
          flag:true,
          check:false,
          userinfo:{},
          // allchecked: true,
          list:[],
          onearr:[],//复选框
          allarr:[],//全选框
          num:0,
        };
    },
    computed: {
      total() {
      // 确保 cardata 是数组
      const filtertrue = this.list.filter(item => item.ischeck ) 
      return filtertrue.reduce((pre, cut) => {
        return pre + (cut.price * cut.pnum);
      }, 0)
    },
    },
    created() {},
    mounted() {
      this.userinfo=get('userinfo')//先获取用户信息
      this.getdata();//在发送请求

      

    },
    methods: {
      async getdata(){

        let res =await carDate({uid:this.userinfo.uid});
        if(res.code==200){
          this.list=res.data
          this.check=this.list.every(item=>item.ischeck)
          if(this.list.length==0){
           this.flag=false
            
          }
        }
      },
      //滑动删除
      async del(v){
        // console.log(v);
        // let res = await delCar({params:{sid:v.sid}})
        let res = await delCar({params:{sid:v.sid}})
        if(res.code==200){
          this.getdata()
        }
        console.log(res);
      },
      //数量增加
      async add(v){
        v.pnum++
        let res = await Modify({params:{sid:v.sid,pnum:v.pnum}})
      },
     //数量减少
     async min(v){
      if(v.pnum>1){
        v.pnum--
        let res=  await Modify({params:{sid:v.sid,pnum:v.pnum}})
      }
      else{
        return
      }
     },
     //输入数字
      async tab(v){
        let res=await Modify({params:{sid:v.sid,pnum:v.pnum}})
        // console.log(res);
        this.getdata()
      },
      delall(){
        const filtertrue = this.list.filter(item => item.ischeck ) 
        filtertrue.forEach(item => {this.del(item)})
      },
     //复选框控制全选
     async checkone(v){
      console.log(v);
      
        let res=await setState({params:{sid:v.sid,ischeck:v.ischeck/1}})
        // console.log(res);
        this.check=this.list.every(item=>item.ischeck)//只要有一个复选框为false 全选框的值为false
        this.disflag=!this.list.some(item=>item.ischeck)
        this.getdata()
     },
     async checkall(){
      let sida=this.list.map(v=>v.sid)
        let res=await setState({params:{sid:sida,ischeck:this.check/1}})
        this.getdata()
     },
     async pay(){
      // console.log(this.list);
      const plist=this.list.filter(item=>item.ischeck)
      const payarr=[]
      plist.forEach(item=>{
        payarr.push({tid:item.tid,pnum:item.pnum,price:item.price/1,timg:item.timg,tname:item.tname,sid:item.sid})
      })
      // console.log(payarr);
      
      const puid=this.userinfo.uid
      const ptotal=this.total
      // console.log(get('addr'));
      if(!get('addr')){
        this.$router.push('/address')
        return
      }else{
        if(get('addr').every(item=>item.isDefault!=1)){
          Toast("请选择默认地址")
        }else{
          let res=get('addr').filter(item=>item.isDefault==1)
        console.log(res); 
        const puser=res[0].name
        const ptel=res[0].tel
        const paddress=res[0].city+'/'+res[0].county+'/'+res[0].addressDetail
       let req=await payData({uid:puid,user:puser,tel:ptel,address:paddress,total_price:ptotal,list:payarr})
       if(req.code==200){
       let sidm=payarr.map(item=>item.sid).join(',')
       await delCar({params:{sid:sidm}})
       Toast("结算成功")
        }
       this.getdata()
        }
        
      }
      
     },
     go(v){
      this.$router.push("/det?tid="+v.tid)
      },
     btngoshop(){
       this.$router.push('/index/home')
     }
    },
    watch: {
    
    }
    }
</script>
<style scoped  lang="less">

.car /deep/ .van-submit-bar  {
 position: fixed;
 bottom:50px;
 z-index: 100;  
}
  .car /deep/ .van-swipe-cell__right{
    border: 1px solid white;
  }
.car /deep/ .delete-button{
  margin-top: 15px;
      height: 130px;
      border: none;
      }
.car{
  .goshop{
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  margin:200px auto;
  img{
    width: 40vw;
  }
  div{
    margin-top: 20px;
  }
  button{
    margin-top: 20px;
    width: 80px;
    background: rgb(150, 191, 183);
    height: 40px;
    border-radius: 10px;
    border: none
  }
}
.box{
  display: flex;
  .it{
    display: flex;
    align-items: center;
  }
  .its{
    height: 180px;
    // margin-top: 10px;
    flex: 1;
    .cardits{
     border-top: 15px solid white;
    }
  }
}
.van-card__footer{
  position: relative;
  left: 300px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 40px;
  .van-inptext{
  text-align: center;
  border: none;
  width: 20px;
  height: 20px;
}
}
}
.delbtn{
  height: 30px;
  width: 57px;
  font-size: 12px;
  border-radius: 10px;
  border: none;
  margin-left: 6px;
  background: linear-gradient(to right, yellowgreen, green);
  color: white;

}
</style>
